<template lang="html">
  <div class="loadMoudle">
    <slot></slot>
    <footer class="load-more">
      <slot name="load-more">
        <div class="noMoreData-tip" v-if="!canPull">
          <span class="connectingLine"></span>
          <span class="noMoreData-tip-text">我是有底线的</span>
          <span class="connectingLine"></span>
        </div>
      </slot>
    </footer>
  </div>
</template>

<script>
export default {
  props: {
    canPull: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  mounted() {
    window.addEventListener('scroll',this.judgeScrollBarToTheEnd,false)
  },
  destroyed(){
    window.removeEventListener('scroll', this.judgeScrollBarToTheEnd, false)
  },
  methods: {
    // 判断滚动条是否到底
    judgeScrollBarToTheEnd () {
      let innerHeight = document.querySelector('.loadMoudle').clientHeight
      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.clientHeight || document.body.scrollHeight
      // 滚动条到底部的条件
      if (scrollTop + scrollHeight >= innerHeight-100) {
        if(this.canPull){
          this.$emit('reloadData')
        }
      }
    },
  },
}
</script>

<style scoped>
.load-more {
  width: 100%;
  color: #c0c0c0;
  background: #f7f7f7;
  font-size: 12px;
}
.moreData-tip,
.loadingMoreData-tip,
.noMoreData-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.loadMoudle .icon-loading {
  display: inline-flex;
  width: 35px;
  height: 35px;
  background: url(../assets/img/popupPCloseBtn.png) no-repeat;
  background-size: cover;
  margin-right: 5px;
  animation: rotating 2s linear infinite;
}
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1turn);
  }
}
.connectingLine {
  display: inline-flex;
  width: 100px;
  height: 1px;
  background: #ddd;
  margin-left: 20px;
  margin-right: 20px;
}
</style>
